import React from 'react'
import '../../styles/myJump/condition.css'
import axios from 'axios'
import Axios from 'axios';
axios.default.widthCredentials = true

class Topic extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [],
        }
    }

    componentDidMount() {
        let uid = localStorage.getItem('token')
        // /user/event?uid=32953014
        Axios.get('http://localhost:4000/user/event?uid=' + uid)
            .then(res => {
                // console.log(res)
                this.setState({
                    data: res.data.events,
                })
            })
    }
    render() {
        let { data } = this.state
        return (
            <div>
                {data.map((item, i) => {
                    // console.log(item, i)
                    let duration = JSON.parse(item.json)
                    // console.log(duration)
                    return (
                        <div key={i}>
                            {duration.topic ? <div>
                                <div className='own-dynamics clearfix'>
                                    <div className='own-dynamics-title'>
                                        <p>{duration.topic.title}</p>
                                        <span>by{duration.topic.creator.nickname}</span>
                                    </div>
                                    <div className='own-dynamics-img'>
                                        <img src={duration.topic.coverUrl} alt="" />
                                    </div>
                                </div>

                            </div> : ''}
                        </div>
                    )
                })}

            </div>
        )
    }
}

export default Topic